<template>
	<!-- 手动选择打印机 -->
	<view class="print-box">
		<!-- 顶部搜索框 -->
		<view class="print-input flex" style="">
			<view class="" style="flex: 1;">
				<u-search placeholder="请输入设备位置/设备型号" @change="" @search='search' @custom="" @blur=""
					v-model="inputText"></u-search>
			</view>
		</view>
		<!-- 显示打印机区域 -->
		<block v-for="(item,index) in printList" :key="index">
			<!-- 点击设备跳转到上一页并且显示内容在选择设备上 -->
			<!-- 传输的是设备号 -->
			<view class="showPrint flex just-between" @click="selectNavPrint(item.title)">
				<view class="print-img">
					<image :src="item.url"></image>
				</view>
				<view class="flex-column">
					<!-- 编号 -->
					<view class="printNumber">
						{{item.title}}
					</view>
					<!-- 地址 -->
					<view class="flex printAddress">
						<!-- 定位图标 -->
						<view class="iconAddress">
							<image :src="item.icon"></image>
						</view>
						<!-- 地址信息 -->
						<view class="address">
							{{item.futitle}}
						</view>
					</view>
				</view>
				<view class="icon-next flex align-center">
					<image :src="item.arrow"></image>
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	// import {
	// 	skuprice
	// } from '@/api/spu.js'
	// import {
	// 	selectId
	// } from '@/api/selectId.js'
	import {
		GetTerminalDistance
	} from '@/api/xcx/index/index.js'
	export default {
		data() {
			return {
				pageindex: 1,
				pagesize: 10,
				datacount: 1,
				postdata: [],
				messageList: {},
				Distance: 5000, //查询的距离{m}
				latitude: '', //经度
				longitude: '', //维度
				url: '',
				selectSku: '', //传输过来的sku
				// printId: '', //传过来的id
				inputText: '', //搜索框v-model
				throttle: true, //节流点击搜索按钮
				stabilization: '', //防抖边输入边显示内容
				printList: [{
						id: 1,
						url: '../../static/chart@2x.png',
						title: 'SDF10409160223',
						icon: '../../static/address@2x.png',
						futitle: '龙子湖区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
					{
						id: 2,
						url: '../../static/chart@2x.png',
						title: 'ZYX10409160223',
						icon: '../../static/address@2x.png',
						futitle: '金水区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
					{
						id: 3,
						url: '../../static/chart@2x.png',
						title: 'ERT10409160223',
						icon: '../../static/address@2x.png',
						futitle: '文化区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
					{
						id: 4,
						url: '../../static/chart@2x.png',
						title: 'SDF10409160223',
						icon: '../../static/address@2x.png',
						futitle: '龙子湖区丰庆路魏河北路瀚宇天悦',
						arrow: '../../static/into@2x.png'
					},
				],

			}
		},
		// onLoad(option) {
		// 	this.selectSku = option.select;
		// 	console.log(option, 'option')
		// },

		onLoad(option) {
			console.log(option, 'edewdewdewdewddddddddddd')
			if (typeof option.messageList == 'string' && option.messageList != undefined) {
				let parse = JSON.parse(option.messageList);
				this.messageList = parse;
				this.url = parse.url
				console.log(this.messageList, 'this.messageList')
			}
			this.latgh()

		},
		onShow() {
			// h获取设备未作 12.12
			// selectId(){
			// 	selectId().then(res=>{
			// 		console.log(res,'设备的id')
			// 	})
			// }
		},

		onUnload() {
			console.log('select消失onUnload')
			uni.setStorage({
				key: 'seleprint',
				data: 'seleprint',
			})
		},
		methods: {
			latgh() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						GetTerminalDistance([{
								"field": "Lat",
								"value": this.latitude
							},
							{
								"field": "Lng",
								"value": this.longitude
							},
							{
								"field": "Distance",
								"value": this.Distance
							}
						]).then(res=>{
							console.log(res,'res')
						})
					}
				})
			},
			// 搜索按钮
			change() {
				this.printList.forEach((item, index) => {})
			},
			search() {
				let list = [];
				this.printList.forEach((item, index) => {
					let str = this.inputText;
					let patt1 = new RegExp(str);
					let result = patt1.test(item.futitle); //输入的内容是否test包含在item.futitle(自带的)
					let result2 = patt1.test(item.title); //输入的内容是否test包含在item.futitle(自带的)
					if (result || result2) {
						this.printList = [];
						list.push(item);
						this.printList = list;
					}
				})
			},
			custom() {
				this.printList.forEach((item, index) => {
					console.log(item)
				})
			},
			blur() {
				this.printList.forEach((item, index) => {
					console.log(item)
				})
			},
			// 传输的是设备号码
			selectNavPrint(text) {
				// 拿着传输过来的sku和当前的设备编号发送请求
				// var SKUText = [{
				// 		field: 'SKUId',
				// 		value: this.selectSku
				// 	},
				// 	{
				// 		field: 'TerminalId',
				// 		value: 'sdcfewfewfewf'
				// 	}
				// ];
				// skuprice(SKUText).then(res => {
				// 	console.log(res, '获取的价格')
				// 	console.log('获取的价格')
				// })
				// let pages = getCurrentPages(); //获取所有页面栈实例列表
				// let nowPage = pages[pages.length - 1]; //当前页页面实例
				// let prevPage = pages[pages.length - 2]; //上一页页面实例
				// prevPage.$vm.selePrint = text; //修改上一页data里面的searchVal参数值为1211
				// // if (this.selectSku == 1000001) {
				// prevPage.$vm.amount = 111; //修改上一页data里面的价格参数值为1211
				// // } else {
				// // prevPage.$vm.amount = 222; //修改上一页data里面的价格参数值为1211
				// // }
				// uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
				// 	delta: 1
				// })
				console.log('sfjewiohfuwehfweuiofhweuidhuisadbawuid')
				this.messageList.id = text; //设备号码
				uni.redirectTo({
					url: `${this.url}?messageList=` + JSON.stringify(this.messageList)
				})
			}
		},
	}
</script>
<style>
	.print-box {
		margin: 10rpx 30rpx 0rpx 30rpx;

	}

	.print-input {
		padding: 18rpx 0rpx 18rpx 26rpx;
		margin-bottom: 40rpx;
		box-shadow: 0px 0px 8px 0px #E6E6E6;
		background: #FFFFFF;
		border-radius: 15px;
	}

	/* 打印机内容显示的区域 */
	.showPrint {
		width: 100%;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 0.5);
		border-radius: 5px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.print-img {
		width: 124rpx;
		height: 124rpx;
	}

	/* 设备编号 */
	.printNumber {
		display: flex;
		align-items: center;
		font-size: 16px;
		height: 50%;
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		color: #22222
	}

	.printAddress {
		height: 50%;
		display: flex;
		padding-top: 10rpx;
		/* align-items:center; */
	}

	.iconAddress {
		width: 20rpx;
		height: 24rpx;
		margin-right: 14rpx;
	}

	/* 地址信息 */
	.address {
		height: 12px;
		font-size: 12px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: #999999;
	}

	.icon-next {
		/* width: 10rpx;
		height: 18rpx; */
	}

	.icon-next>image {
		width: 10rpx;
		height: 18rpx;
	}
</style>
